<template>
    <div>
        <div class="bread_crumb">
            <bread-crumb></bread-crumb>
        </div>
        <div class="stu_info_wrap">
            <div class="stu_info">
                <h1 class="stu_info_title">学生信息录入</h1>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="学号" prop="stu_id">
                                <el-input v-model.trim="form.stu_id"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="stu_name">
                                <el-input v-model.trim="form.stu_name"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="stu_sex">
                                <el-radio v-model="form.stu_sex" label="男">男</el-radio>
                                <el-radio v-model="form.stu_sex" label="女">女</el-radio>
                            </el-form-item>
                            <el-form-item label="籍贯">
                                <!-- <el-input v-model.trim="form.stu_jg"></el-input> -->
                                <el-cascader v-model="value" :options="options"
                                    :props="{ label: 'name', value: 'name', }" @change="handleChange">
                                </el-cascader>
                            </el-form-item>
                            <el-form-item label="日期" prop="stu_date">
                                <!-- <el-input v-model.trim="form.stu_date"></el-input> -->
                                <el-date-picker v-model="form.stu_date" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="男女朋友" prop="stu_gbf">
                                <!-- <el-input v-model.trim="form.stu_gbf"></el-input> -->
                                <template>
                                    <el-radio v-model="form.stu_gbf" label="YES">YES</el-radio>
                                    <el-radio v-model="form.stu_gbf" label="NO">NO</el-radio>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="头像" prop="stu_head_img">
                                <!-- <el-input v-model.trim="form.stu_head_img"></el-input> -->
                                <div>
                                    <el-button @click="upLoad">点击上传图片</el-button>
                                    <el-button @click="goCamera">拍照上传</el-button>
                                </div>
                                <input type="file" @change="getFile" ref="getInp" hidden name="" id="" />
                                <div>
                                    <img width="150px" height="150px" :src="form.stu_head_img" alt="" srcset="" />
                                </div>

                                <div>
                                    <p>
                                        注:将其转为base64字符串上传,图片大小为1M左右,否则不能上传
                                    </p>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="爱好及自我评价">
                        <!-- <el-input v-model.trim="form.stu_hobby"></el-input> -->
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                            :mode="mode" />
                        <div class="wangEditWrap" style="height: 200px; overflow: hidden">
                            <Editor style="height: 500px; overflow-y: hidden" v-model="html"
                                :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" :plain="true" @click="onSubmit">提交</el-button>
                        <el-button type="primary" @click="goReset">重置</el-button>
                        <!-- <el-button type="primary" @click="$router.push({ name: 'testResetComponent' })">go
                        testResetComponent</el-button> -->
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { Cascader } from "element-ui";
import { req_area, req_stu_info } from "@/api/stuInfo.js";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
    data() {
        return {
            form: {
                stu_id: "",
                stu_name: "",
                stu_sex: "男",
                stu_jg: "",
                stu_date: "",
                stu_hobby: "",
                stu_gbf: "YES",
                stu_head_img: "",
            },
            value: [],
            options: [],
            // 富文本编辑器组件的初始化数据
            editor: null,
            html: "<p>hello</p>",
            toolbarConfig: {},
            editorConfig: { placeholder: "请输入内容..." },
            mode: "default", // or 'simple'
        };
    },
    async mounted() {
        let result = await req_area();
        console.log(result);
        this.options = result.data;
        //传参
        console.log(this.$route.query);
        this.form.stu_head_img = this.$route.query.imgSrc;
        console.log(this.form);
    },
    methods: {
        goCamera() {
            this.$router.push({
                name: "cameraUpload",
            });
        },
        upLoad() {
            this.$refs.getInp.click();
        },
        getFile() {
            console.log("获取图片的函数");
            let that = this;
            // 获取input files文件
            console.dir(this.$refs.getInp.files[0]);
            let f = this.$refs.getInp.files[0];
            let fr = new FileReader();
            fr.readAsDataURL(f);
            fr.onload = function () {
                that.form.stu_head_img = fr.result;
            };
        },
        handleChange(value) {
            console.log(value);
            // 将数组变为字符串
            this.form.stu_jg = value.join("-");
            console.log(this.form.stu_jg);
        },
        async onSubmit() {
            console.log("这是提交");
            //getText()获取的是富文本编辑器当中的文本
            //getHtml()获取的是富文本编辑器当中的标签
            this.form.stu_hobby = this.editor.getText();
            console.log(this.form);
            //收集所有的学生信息相关的数据 提交给服务器
            let result = await req_stu_info(this.form);
            console.log(result);

            this.$message({
                message: "数据提交成功！！",
                type: "success",
                offset: 130,
            });
            //提交完毕自动清空
            this.$refs.form.resetFields();
            // this.form.stu_head_img="";
            this.$refs.getInp.value = null;
            this.value = [];
            this.html = "<p></p>";
        },
        goReset() {
            console.log("这是重置");
            this.$refs.form.resetFields();
            // this.form.stu_sex= "男";
            // this.form.stu_gbf= "YES";
            // this.form.stu_head_img="";
            this.$refs.getInp.value = null;
            //清空籍贯
            this.value = [];
            //清空富文本框
            this.html = "<p></p>";
        },
        onCreated(editor) {
            // 一定要用 Object.seal() ，否则会报错
            this.editor = Object.seal(editor);
        },
    },
    components: {
        "el-cascader": Cascader,
        Editor,
        Toolbar,
    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 组件销毁时，及时销毁编辑器
    },
};
</script>

<style lang="scss" scoped>
div {
    .bread_crumb {
        height: 30px;
    }

    .stu_info_wrap {
        display: flex;
        justify-content: center;
        align-items: center;

        .stu_info {
            width: 800px;

            .stu_info_title {
                text-align: center;
                margin-bottom: 20px;
            }
        }
    }
}
</style>